import { reactive, ref } from "vue";
export default function () {
  // 测试vue的过滤
  const isShowTitle = ref(true);
  const requireModule = require.context("@/assets/images", false, /.jpg$/);
  // 背景界面
  const ImageNameArray = [].slice.apply(requireModule.keys());
  const backgroundImageNameArray = ImageNameArray.map((str) => {
    return str.substr(2);
  });
  // 初始化界面背景
  const index = Math.floor(Math.random() * backgroundImageNameArray.length);
  const state = reactive({
    backgroundUrl: `url(${require(`@/assets/images/${backgroundImageNameArray[index]}`)})`,
    preBackgroundIndex: index
  });
  // 换肤
  const skinPeeler = () => {
    let index = Math.floor(Math.random() * backgroundImageNameArray.length);
    while (state.preBackgroundIndex == index) {
      index = Math.floor(Math.random() * backgroundImageNameArray.length);
    }
    state.preBackgroundIndex = index;
    state.backgroundUrl = `url(${require(`@/assets/images/${backgroundImageNameArray[index]}`)})`;
    isShowTitle.value = !isShowTitle.value;
  };
  return {
    skinPeeler,
    state,
    isShowTitle
  };
}
